<!--  页面搜索条件区域   -->
<template>
  <div class="hm-filter-box filter-box-addlistener">
    <div class="filter-main" ref="filterbox">
      <div :class="{ active: isMore || displayMore }" class="filter-left">
        <el-form
          :label-width="labelWidth ? labelWidth + 'px' : '100px'"
          class="filter-box-form t-filter-main"
          @submit.native.prevent
        >
          <el-row>
            <template v-for="(item, index) in column">
              <template v-if="showHandler(item)">
                <template v-if="item.type === 'slot'">
                  <slot :name="item.slotName" :row="item" :index="index" />
                </template>
                <template v-else-if="(item.hidden ? !item.hidden() : true) && item.label">
                  <el-col :key="index" :sm="24" :md="12" :lg="8">
                    <el-form-item
                      :label="item.label + ':'"
                    >
                      <!-- 输入框  (没有type 默认 input) -->
                      <el-input
                        v-if="(item.type === 'input' || !item.type) && item.fieldName"
                        :disabled="item.disabled"
                        :class="`t-fitler-item-${item.fieldName || item.startField}`"
                        v-model="dataObj[item.fieldName]"
                        :maxlength="item.maxlength || 35"
                        :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
                        clearable
                      />
                      <!-- 下拉选择框 -->
                      <template v-else-if="['select'].includes(item.type) && item.fieldName">
                        <hm-select
                          :ref="item.fieldName"
                          v-if="item.type === 'select' && !item.multiple"
                          v-model="dataObj[item.fieldName]"
                          :list="item.list ? item.list() : []"
                          :disabled="item.disabled"
                          :show-value="item.showValue"
                          :show-all="item.showAll === undefined ? true : item.showAll"
                          :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label"
                          :value-field="item.valueField || 'value'"
                          :label-field="item.labelField || 'label'"
                          style="width: 100%"
                          @change="item.change || (() => {})"
                          @select="item.select || (() => {})"
                        />
                      </template>
                      <!-- 时间选择框-->
                      <template v-else-if="dateComponents.includes(item.type) && item.startField && item.endField">
                        <component
                          :ref="item.fieldName"
                          :class="`t-fitler-item-${item.fieldName || item.startField}`"
                          :is="'hm-date-range-picker'"
                          :type="item.type"
                          :data-obj.sync="dataObj"
                          :start-field="item.startField"
                          :end-field="item.endField"
                          :picker-options-obj="item.pickerOptionsObj || {}"
                          :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label"
                          :disabled="item.disabled"
                          @select="item.select || (() => {})"
                          :endYestday="item.endYestday"
                        />
                      </template>
                    </el-form-item>
                  </el-col>
                </template>
              </template>
            </template>
          </el-row>
        </el-form>
      </div>
      <div class="filter-btn-groups" v-if="!notShowBtn">
        <el-button type="primary" size="mini" class="t-filter-search" @click="searchHandle">
          {{ searchText }}
        </el-button>
        <el-button type="info" size="mini" @click="resetHandler">
          {{ resetText }}
        </el-button>
        <el-button
          v-if="open"
          type="text"
          icon="hmt-more"
          size="mini"
          class="t-filter-more"
          style="font-size: 16px"
          @click="isMore = !isMore"
        >
          {{ isMore ? '收起' : '更多' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { isFunction } from '@/utils/utils'
import HmDateRangePicker from '@/components/DateRangePicker/index.vue'
import HmSelect from '@/components/Select/index.vue'
/**
 * @search  监听搜索事件
 */
export default {
  name: 'FilterBox',
  components: { HmDateRangePicker, HmSelect },
  props: {
    open: {
      type: Boolean,
      default: false
    },
    searchText: {
      type: String,
      default: '查询'
    },
    displayMore: {
      type: Boolean,
      default: false
    },
    // 变更的数据对象  一般是 listQuery
    dataObj: {
      required: true,
      type: Object
    },
    // 搜索框 搜索项配置参数 具体参数介绍在上面
    column: {
      type: Array,
      default() {
        return []
      }
    },
    // el-form label 宽度
    labelWidth: {
      type: Number,
      default: 100
    },
    source_type: {
      type: [String, Number, null],
      default: null
    },
    store_no: {
      type: [String, null],
      default: null
    },
    type: {
      type: String,
      default: '1'
    },
    resetText: {
      type: String,
      default: '重置'
    },
    reset: {
      type: Boolean,
      default: false
    },
    notShowBtn: { // 是否展示按钮
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isMore: false,
      filterMainEl: null,
      chacheListQuery: {},
      dateComponents: ['datetimerange', 'date', 'monthrange', 'singledate', 'oneday', 'month']
    }
  },
  mounted() {
    this.filterMainEl = this.$refs.filterbox
    this.filterMainEl && this.filterMainEl.addEventListener('keyup', this.eventHandle, false)
    this.chacheListQuery = Object.assign({}, this.dataObj)
  },
  beforeDestroy() {
    this.filterMainEl && this.filterMainEl.removeEventListener('keyup', this.eventHandle, false)
  },
  methods: {
    searchHandle() {
      for (let key in this.dataObj) {
        if (this.dataObj[key] === '' || this.dataObj[key] === undefined) {
          this.dataObj[key] = null
        }
      }
      this.dataObj.page_num && (this.dataObj.page_num = 1)
      this.$emit('update:dataObj', this.dataObj)
      this.$emit('search')
    },

    skuEnterHandle() {
      this.$emit('update:dataObj', this.dataObj)
      this.$emit('search')
    },
    eventHandle(e) {
      if (e.keyCode === 13 && e.target.tagName === 'INPUT') {
        this.dataObj.page_num = 1
        // 删除空值 改成null
        for (let key in this.dataObj) {
          this.dataObj[key] = this.dataObj[key] || null
        }
        this.$emit('update:dataObj', this.dataObj)
        this.$emit('search')
      }
    },
    showComponents(type) {
      return this.column.find(v => v.type === type)
    },

    showHandler(item) {
      if (!item.show) return true
      if (['[object Number]', '[object String]'].includes(Object.prototype.toString.call(item.show))) {
        return Boolean(Number(item.show))
      } else if (Object.prototype.toString.call(item.show) === '[object Function]') {
        return item.show()
      }
    },



    resetHandler() {
      let page_size = this.dataObj.page_size
      this.column.forEach(v => {
        if(!v.notClear) {
          if (v.startField) {
            this.$set(this.dataObj, v.startField, null)
            this.$set(this.dataObj, v.endField, null)
          } else if (v.fieldName) {
            this.$set(this.dataObj, v.fieldName, null)
          }
        }
      })
      this.dataObj.page_num = 1
      this.dataObj.page_size = page_size
      if (this.$refs.sku) {
        for (let i = 0; i < this.$refs.sku.length; i++) {
          this.$refs.sku[i] && this.$refs.sku[i].clearHandle()
        }
      }
      this.$emit('update:dataObj', this.dataObj)
      this.$emit('resetHandler')
    },
    getWidth(item) {
      return ['store'].includes(item.type) ? 8 : 6
    },
    getParams(params) {
      if (isFunction(params)) return Boolean(params())
      return Boolean(params)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.hm-filter-box {
  padding: 0 4px 2px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  .elhm-input.elhm-input--suffix:hover .el-icon-s-grid.active {
    display: none;
  }

  .filter-main {
    position: relative;
    display: flex;
  }

  .filter-left {
    flex: 1;
    height: 48px;
    transition: height 0.4s;
    overflow-y: hidden;
    overflow-x: hidden;
    padding-top: 6px;
    &.active {
      height: auto;
      overflow-y: clip;
      overflow-x: hidden;
    }

    .elhm-form-item {
      margin-bottom: 3px;
    }
  }


  .filter-btn-groups {
    margin-left: 10px;
    display: flex;
    align-items: center;
  }
}
</style>
